<template>
  <view class="custom">
        
        <view class="dakatixing" v-if="type==='1'" @tap="goClockinState">
            <view class="title d-flex d-r a-center">
                <text class="text">
                    {{extension.title}}
                </text>
            </view>
            <view class="box">
                <view class="card d-flex d-r">
                    <view class="left_area d-flex d-c">
                        <image class="bell" src="/static/nvue/bell.png" mode="" />
                        <text class="text">
                            {{clockTypes[extension.type]}}
                        </text>
                    </view>
                    <image class="clockinImg" src="/static/nvue/clockin.png" mode="" />
                </view>

                <view class="desp1">
                    <text class="text">打卡通知</text>
                </view>

                <view class="desp2">
                    <text class="text">当前打卡进度{{extension.progress}}</text>
                </view>
            </view>
        </view>


        <view class="yaoqingruquan d-felx d-c a-center" v-if="type==='2'" @tap="goDiscoverDetail">
            <view class="title d-flex d-r a-center">
                <text class="text">
                    {{extension.title}}
                </text>
            </view>
            <view class="box d-flex a-center j-center">
                <view class="head_box d-flex d-r a-center">
                    <image class="grouphead" :src="extension.avatar" mode="" />
                </view>
                <view class="jiaobiao" :class="[shadowClass]">
                    <text class="text">{{ jiaobiaoText }}</text>
                </view>

                <view class="groupName d-flex d-r a-center">
                    <text class="text">{{extension.name}}</text>
                </view>
                <!-- <view class="card d-flex d-r">
                    <view class="left_area d-flex d-c">
                        <image class="bell" src="/static/nvue/bell.png" mode="" />
                        <image class="grouphead" :src="extension.avatar" mode="" />
                    </view>
                    <image class="clockinImg" src="/static/nvue/clockin.png" mode="" />
                </view>

                <view class="desp1">
                    <text class="text">{{extension.name}}</text>
                </view>

                <view class="jiaobiao" :class="[shadowClass]">
                    <text class="text">{{ jiaobiaoText }}</text>
                </view>

                <view class="desp2">
                    <text class="text">{{extension.memberCount}}位胖友已加入</text>
                </view> -->
            </view>
        </view>
        <view class="fenxiangfangan d-flex d-r a-center" :class="[
            message.flow === 'in' ? '' : 'reverse',
        ]" v-if="type==='5'" @tap="goProgrammDetails">
            <view class="left_box">
                <view class="title d-flex d-r a-center"><text class="text">方案：{{extension.title}}</text></view>
                <text class="desp">{{extension.name}}</text>
            </view>
            <image class="img" :src="extension.avatar" mode="" />
        </view>

		<view class="business-card d-flex" style="flex-direction: column;" :class="[
		    message.flow === 'in' ? '' : 'reverse',
		]" v-if="type==='business_card'" @tap="goPersonalCenter">
			<view class="business-card-content d-flex d-r a-center">
				<image class="card-content-img" :src="extension.userPhoto" mode="" />
				<text class="card-content-name">{{extension.nickName}}</text>
			</view>
		    <view class="business-card-tip d-flex d-r a-center">
				<text class="card-tip-text">个人名片</text>
			</view>
		</view>
		
		
        <!-- <view class="clockin" v-if="type==='3'" @tap="goDiscoverDetail">
            <text class="text">
                {{extension.text}}
            </text>
        </view> -->

    
  </view>
</template>

<script lang="ts" setup>
import { watchEffect,ref,computed } from 'vue';
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
const systemConfig: any = systemConfigStore();

const jiaobiaoText = computed(() => {
    let str = "";
    systemConfig.groupTag.forEach((item:any) => {
        if (item.slimKey === extension.value.label) {
            str = item.slimValue;
        }
    });

    return str;
});


const clockTypes = ref({
    0:"早餐",
    1:"午餐",
    2:"晚餐",
    3:"加餐",
    4:"喝水",
    5:"体重",
    6:"运动",
});

const shadowClass = computed(() => {

    if (!systemConfig.groupTag) {
        return "";
    }

    if (!systemConfig.groupTag.length) {
        return "";
    }

    if (extension.value.label === systemConfig.groupTag[0].slimKey) {
        return "shadow0";
    }

    if (extension.value.label === systemConfig.groupTag[1].slimKey) {
        return "shadow1";
    }

    if (extension.value.label === systemConfig.groupTag[2].slimKey) {
        return "shadow2";
    }

    if (extension.value.label === systemConfig.groupTag[3].slimKey) {
        return "shadow3";
    }

    if (extension.value.label === systemConfig.groupTag[4].slimKey) {
        return "shadow4";
    }
});


const props = defineProps({
    data: {
      type: Object,
      default: () => {
        return {};
      }
    },
    messageData: {
			type: Object,
			default: () => {
			  return {};
			}
	}
});


const type = ref('');
const extension:any = ref({});
const payload:any = ref({});
const message:any = ref({});

const goDiscoverDetail = () => {
	console.log(extension.value)
    const groupID = extension.value.groupId
	const inviterId = extension.value.inviterId
	const inviterName = extension.value.inviterName
    if(!groupID){
        return;
    }
    uni.navigateTo({
        url: `/pages/discover/discoverDetail?groupId=${groupID}&inviterId=${inviterId}&inviterName=${inviterName}`,
    });
};


const goClockinState = () => {
    const groupId = extension.value.groupId
    const type = extension.value.type

    if(!groupId){
        return;
    }
    uni.navigateTo({
        url: `/pages/clockinState/clockinState?groupId=${groupId}&type=${type}`,
    });
};
const goProgrammDetails = () => {
	uni.navigateTo({
	    url: `/pages/programmeDetails/programmeDetails?programmeId=${extension.value.pid}&&from=group`,
	});
}
const goPersonalCenter = () => {
	console.log(extension.value)
	uni.navigateTo({
	    url: `/pages/personalCenter/personalCenter?userId=${extension.value.userId}`,
	});
}

watchEffect(()=>{


    message.value = props.data.message;
    payload.value =props?.data?.message?.payload;
    type.value = props?.data?.message?.payload?.data;


    try {
        extension.value = JSON.parse(props?.data?.message.payload?.extension);
    } catch (error) {
        
    }

    //   data.data = props.data;
	// 		data.message = props.messageData;
    //   data.isCustom = props.data.message.payload.data;
    //   data.payload = props.data.message.payload;
    //   if (props.data.message.payload.data === 'consultion') {
    //     data.extension = JSON.parse(props.data.message.payload.extension);
    //   }
});


// const MessageCustom =  defineComponent({
//   props: {
//     data: {
//       type: Object,
//       default: () => {
//         return {};
//       }
//     },
// 		messageData: {
// 			type: Object,
// 			default: () => {
// 			  return {};
// 			}
// 		}
//   },
//   setup(props:any, ctx:any) {
//     const data = reactive({
//       data: {},
//       extension: {},
//       isCustom: '',
//       payload: {},
// 			message: {},
//     });
//     return {
//       ...toRefs(data),
//     };
//   }
// });
//export default MessageCustom
</script>
<style lang="scss" scoped>


.reverse {
    flex-direction: row-reverse !important;
    .img{
        margin-right:20rpx;
    }
}

.a-center {
    align-items: center;
}

.j-center {
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}

.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column !important;
}
.d-r {
    flex-direction: row;
}

.j-end {
    justify-content: flex-end;
}

.custom {
    .dakatixing{
        width: 360rpx;
        height: 410rpx;
        background: #FFFFFF;
        border-radius: 40rpx;
        padding:20rpx 36rpx;
        &:active{
            opacity: .8;
        }

        .title{
            height:42rpx;
            .text{
                font-size:30rpx;
                color:#333;
            }
        }

        .box{
            width: 300rpx;
            height: 300rpx;
            border: 14rpx solid #F4FAF8;
            margin-top:20rpx;
            .left_area{
                width:150rpx;
                height:150rpx;
                .bell{
                    width:90rpx;
                    height:90rpx;
                }
                .grouphead{
                    width:60rpx;
                    height:60rpx;
                    box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
                    border-radius: 1000px;
                    border:3rpx solid #fff;
                    margin-left:20rpx;

                }
                .text{
                    color:#1DC691;
                    font-size:30rpx;
                    font-weight:600rpx;
                    margin-left:20rpx;
                }
            }
            .card{
                width:300rpx;
                height:150rpx;
                .clockinImg{
                    width:130rpx;
                    height:150rpx;
                }
            }

            .desp1{
                margin-top:10rpx;
                padding:0 20rpx;
                .text{
                    color:#333;
                    font-weight:600;
                }
            }
            .desp2{
                margin-top:20rpx;
                padding:0 20rpx;
                .text{
                    color:#999;
                    font-size:20rpx;
                }
            }
        }
    }
    .yaoqingruquan{
        width: 360rpx;
        height: 430rpx;
        background: #FFFFFF;
        border-radius: 28rpx;
        padding-top:22rpx;
        &:active{
            background:#f5f5f5;
        }

        .title{
            width:360rpx;
            padding:0 30rpx;
            height:42rpx;
            .text{
                font-size:30rpx;
                color:#333;
            }
        }

        .box{
            position:relative;
            width: 320rpx;
            height: 320rpx;
            border-radius: 18rpx;
            margin-top:10rpx;
            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
            .grouphead{
                width:320rpx;
                height:320rpx;
                border-radius: 18rpx;

            }

            .groupName{
                position:absolute;
                width:320rpx;
                height:50rpx;
                bottom:0rpx;
                background:rgba(0,0,0,0.6);
                padding:0 20rpx;
                border-bottom-left-radius: 18rpx;
                border-bottom-right-radius: 18rpx;
                .text{
                    font-size:24rpx;
                    color:#fff;
                }
            }

            .desp1{
                margin-top:5rpx;
                margin-bottom:5rpx;
                padding:0 20rpx;
                .text{
                    font-size:28rpx;
                    color:#1dc691;
                    font-weight:600;
                }
            }
            .jiaobiao {
                position:absolute;
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 100rpx;
                height: 36rpx;
                border-radius:20rpx;
                overflow: hidden;
                left:14rpx;
                bottom:60rpx;

                &.shadow0 {
                    background: #1dc691;
                }
                &.shadow1 {
                    background: #ff9f26;
                }
                &.shadow2 {
                    background: #905ade;
                }
                &.shadow3 {
                    background: #4c7dfe;
                }
                &.shadow4 {
                    background: #ad3569;
                }
                .icon {
                    color: #fff;
                    font-size: 20rpx;
                    margin-right: 5rpx;
                }

                .text {
                    z-index: 10;
                    font-size: 18rpx;
                    color: #fff;
                }
            }
            .desp2{
                margin-top:10rpx;
                padding:0 20rpx;
                margin-left:3rpx;
                .text{
                    color:#999;
                    font-size:20rpx;
                }
            }
        }
    }

    .fenxiangfangan{
        width:510rpx;
        height:200rpx;
        background:#fff;
        border-radius: 30rpx;
        padding:0 30rpx;
        .left_box{
            flex:1;
            height:140rpx;
            margin-right:20rpx;
            .title{
                width:290rpx;
                .text{
                    width:290rpx;
                    font-size: 32rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    color: #333333;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    lines: 1;

                }
            }
            .desp{
                line-height: 42rpx;
                margin-top:10rpx;
                font-size: 30rpx;
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    lines: 2;
                .text{
                }
            }
        }


        .img{
            width:150rpx;
            height:150rpx;
            border-radius: 10rpx;
        }
    }
	.business-card{
		width:510rpx;
		height:200rpx;
		background:#fff;
		border-radius: 30rpx;
		padding:0 30rpx;
		.business-card-content{
			width:450rpx;
			height: 150rpx;
			.card-content-name{
				padding-left: 15rpx;
				width:290rpx;
				font-size: 32rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				lines: 1;
			}
			.card-content-img{
				width:120rpx;
				height:120rpx;
				border-radius: 10rpx;
			}
		}
		.business-card-tip{
			border-top: 1rpx solid #f5f5f5;
			width:450rpx;
			height: 50rpx;
			.card-tip-text{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #999999;
				font-size: 26rpx;
			}
		}
	}


    // .clockin{
    //     .text{
    //         font-size: 13px;
    //         color: #bbbbbb;
    //         font-family: PingFangSC-Regular;
    //         font-weight: 400;
    //     }
    // }

}
</style>
